<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
<div id="formBox" class="wrapper wrapper-content animated fadeInRight ibox-content">
	<div class="row">
		<div class="col-xs-6">

		</div>
	</div>
	<div class="form-horizontal m" id="form-user-add">
		<div  th:if="${errmessage} != null" class="form-group">
			<label class="col-sm-3 control-label"></label>
			<div class="col-sm-4">
				<div class="col-sm-12 "  th:utext="${errmessage}"></div>
			</div>
		</div>
		<div v-show="authType == '1'" class="form-group">
			<label class="col-sm-3 control-label">身份证正面：</label>
			<div class="col-sm-4">
				<img id="certImgFont" :src="certImgFont" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
			</div>
		</div>
		<div v-show="authType == '1'" class="form-group">
			<label class="col-sm-3 control-label">身份证背面：</label>
			<div class="col-sm-4">
				<img id="certImgBack" :src="certImgBack" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
			</div>
		</div>
		<div v-show="authType == '2'" class="form-group">
			<label class="col-sm-3 control-label">护照照片：</label>
			<div class="col-sm-4">
				<img id="certImgPass" :src="certImgPass" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label ">真实姓名：</label>
			<div class="col-sm-4" style="background: #e7eaec; padding-top:12px;">
				<div class="form-group">
					<div class="col-sm-12">
						<input id="realname" name="realname" class="form-control" type="text" :value="realname">
					</div>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label ">身份证号码：</label>
			<div class="col-sm-4" style="background: #e7eaec; padding-top:12px;">
				<div class="form-group">
					<div class="col-sm-12">
						<input id="idCardNum" name="idCardNum" class="form-control" type="text" :value="idCardNum">
					</div>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label ">手机号码：</label>
			<div class="col-sm-4" style="background: #e7eaec; padding-top:12px;">
				<div class="form-group">
					<div class="col-sm-12">
						<input id="phonenumber" name="phonenumber" class="form-control" type="text" :value="phonenumber">
					</div>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label ">交易密码：</label>
			<div class="col-sm-4" style="background: #e7eaec; padding-top:12px;">
				<div class="form-group">
					<div class="col-sm-12">
						<input id="trancePass" name="trancePass" class="form-control" type="password" :value="trancePass">
					</div>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label ">行业：</label>
			<div class="col-sm-4" style="background: #e7eaec; padding-top:12px;">
				<div class="form-group">
					<div class="col-sm-12">
						<input id="industry" name="industry" class="form-control" type="text" :value="industry">
					</div>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label ">自我介绍：</label>
			<div class="col-sm-4" style="background: #e7eaec; padding-top:12px;">
				<div class="form-group">
					<div class="col-sm-12">
						<input id="profile" name="profile" class="form-control" type="text" :value="profile">
					</div>
				</div>
			</div>
		</div>

		<div class="form-group"></div>
		<div class="form-group">
			<label class="col-sm-3 control-label"></label>
			<div class="col-sm-5">
				<div class="btn-group-sm hidden-xs" id="toolbar" role="group">
					<a class="btn btn-success col-sm-5" onclick="submitHandler()" >
						<i class="fa fa-plus"></i> 保存
					</a>
				</div>
			</div>
		</div>
	</div>
</div>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
<script th:src="@{/js/vue.min.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/ajaxupload.js}"></script>
<div th:include="include::footer"></div>
<script>
    // function validateRule() {
    //     var icon = "<i class='fa fa-times-circle'></i> ";
    //     $("#signupForm").validate({
    //         rules: {
    //             certImgFont: {
    //                 required: true
    //             },
    //             certImgBack: {
    //                 required: true
    //             },
    //             certImgPass: {
    //                 required: true
    //             },
    //             realname: {
    //                 required: true
    //             },
    //         },
    //         messages: {
    //             certImgFont: {
    //                 required: icon + "身份证正面不能为空",
    //             },
    //             certImgBack: {
    //                 required: icon + "身份证背面不能为空",
    //             },
    //             certImgPass: {
    //                 required: icon + "护照照片不能为空",
    //             },
    //             realname: {
    //                 equalTo: icon + "请确认您的真实姓名",
    //             },
    //         }
    //     })
    // }
	//
    // $(function() {
    //     validateRule();
    // });

    var viewAlert = $.modal;
    var modelBean= {
        certImgFont: '[[${thisUser.certImgFont}]]',
        certImgBack: '[[${thisUser.certImgBack}]]',
        certImgPass: '[[${thisUser.certImgPass}]]',
    };
    var vm = new Vue({
        el: '#formBox',
        data: {
            authType: '[[${authType}]]',
            certImgFont: ctx + ('[[${thisUser.certImgFont}]]' ? '[[${thisUser.certImgFont}]]' : 'img/no_img.png'),
            certImgBack: ctx + ('[[${thisUser.certImgBack}]]' ? '[[${thisUser.certImgBack}]]' : 'img/no_img.png'),
            certImgPass: ctx + ('[[${thisUser.certImgPass}]]' ? '[[${thisUser.certImgPass}]]' : 'img/no_img.png'),
            realname:'[[${thisUser.realname}]]',
            idCardNum:'[[${thisUser.idCardNum}]]',
            phonenumber:'[[${thisUser.phonenumber}]]',
            trancePass:'',
            industry:'[[${thisUser.industry}]]',
            profile:'[[${thisUser.profile}]]',
        },
        methods: {
        }
    });

    $(function () {
        new AjaxUpload('#certImgFont', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_pay_img',
                type: 'auth',
                state: '0',
                puth:'11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.certImgFont = ctx + r.url;
                    modelBean.certImgFont = r.url;
                    return;
                } else {
                    alert(r.msg);
                }
            }
        });
        new AjaxUpload('#certImgBack', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_pay_img',
                type: 'auth',
                state: '0',
                puth:'11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.certImgBack = ctx + r.url;
                    modelBean.certImgBack = r.url;
                    return;
                } else {
                    alert(r.msg);
                }
            }
        });
        new AjaxUpload('#certImgPass', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_auth_img',
                type: 'auth',
                state: '0',
                puth: '11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.certImgPass = ctx + r.url;
                    modelBean.certImgPass = r.url;
                    return;
                } else {
                    alert(r.msg);
                }
            }
        });
    });

    function submitHandler() {
        modelBean.realname = $("#realname").val();
        modelBean.phonenumber = $("#phonenumber").val();
        modelBean.trancePass = $("#trancePass").val();
        modelBean.idCardNum = $("#idCardNum").val();
        modelBean.industry = $("#industry").val();
        modelBean.profile = $("#profile").val();
        $.ajax({
            type: "POST",
            url: ctx + "regist/auth",
            data: modelBean,
            dataType: "json",
            success: function (result) {
                if (result.code == 0) {//登录成功
                    location.href = '/index';
                } else {
                    alert(result.msg);
                }
            }
        });
    }
</script>
</body>
</html>
